<template>
    <div class="img-list list-imgs">
        <div class="row">
            <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="" @click="detail">
                        <el-image :src="img5501">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </el-image>
                        <div class="works-title">
                                幻世当空1
                        </div>
                    </div>
                </el-col>
                <el-col class="row-col" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="" >
                        <el-image :src="img5502">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </el-image>
                        <div class="works-title">
                                幻世当空2
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="row">
            <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="" @click="detail">
                        <el-image :src="img5501">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </el-image>
                        <div class="works-title">
                            幻世当空3
                        </div>
                    </div>
                </el-col>
                <el-col class="row-col" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <div class="">
                        <el-image :src="img5502">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </el-image>
                        <div class="works-title">
                            幻世当空4
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 
        <div class="row">
            <el-row :gutter="10" class="row">
                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                    <div class="">
                        <div class="modal"></div>
                        <el-image :src="srcImg001">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </el-image>
                    </div>
                </el-col>
                <el-col class="row-col" :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
                    <div class="">
                        <div class="modal"></div>
                        <el-image :src="srcImg">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </el-image>
                    </div>
                </el-col>
            </el-row>
        </div>
        -->

        <div class="callme">
            <div class="call-info">
                <div class="call-title">
                    <span>如果你需要的正是我擅长的</span>
                </div>
                <div>
                    <span class="welcome pointer">欢迎来聊一下</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import img5501 from '@/assets/images/list/list-5-5-001.jpg'
import img5502 from '@/assets/images/list/list-5-5-002.jpg'
import img3701 from '@/assets/images/list/list-3-7-001.jpg'
import img3702 from '@/assets/images/list/list-3-7-002.jpg'
export default {
    data() {
        return {
            img5501: img5501,
            img5502: img5502,
            srcImg: img3702,
            srcImg001: img3701
        }
    },
    methods: {
        detail() {
            debugger
            this.$router.push('detail')
        }
    }
}
</script>
<style lang="less" scoped>
.img-list {
    margin-top: .45rem;
    padding: .09rem 1.21rem 0 1.21rem;
    position: relative; 

    .row {
        margin: .15rem .13rem 0 .13rem;
    }
}

.callme {
    margin-top:.7rem;
    position: relative;
    div {
        letter-spacing: 3px;
        font-size: .21rem;
        text-align: center;
    }
    span {
        font-size: .21rem;
        color: #7d7471;
    }
    .call-info {
        position: relative;
        width: 3rem;
        margin: 0 auto;
        .call-title {
            margin: .2rem 0 .3rem 0;
        }
        .welcome {
            border-radius: 2px;
            border: 1px solid #e71f19;
            display: inline-block;
            padding: .1rem .71rem;
        }
        .welcome:hover {
            border-color: #e72119;
            background: #f4f4f5;
            color: #fff;
        }
    }
}

.works-title{
    font-size: .2rem;
    color:#fff;
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    text-align: center;
    z-index: 101;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
    -webkit-opacity: 0;
}

.list-imgs .el-col > div:hover .works-title {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -o-opacity: 1;
    opacity: 1;
    -webkit-opacity: 1;
}

@media screen and (max-width: 768px) {

    .img-list{
        padding: 0rem .2rem 0 .2rem;
    }

    .callme .call-info {
        width: 5rem;
    }

    .row-col {
        margin-top: .1rem;
    }
}
</style>